package com.hnly.djdl.home.p1

import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.ExperimentalUnitApi
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.TextUnitType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.hnly.djdl.R
import com.hnly.djdl.components.BorderLineBox
import com.hnly.djdl.components.MainBoxSurface
import com.hnly.djdl.model.P4
import com.hnly.djdl.model.Snack
import com.hnly.djdl.model.indexSnackMap
import com.hnly.djdl.theme.MainBackgroundColor
import com.hnly.djdl.theme.MainTheme
import com.hnly.djdl.theme.MainTitleColor

private val TOP_HEIGHT = 160.dp
private val CEN_HEIGHT = 120.dp
private val TITLE_TOP_PADDING = 40.dp

@OptIn(ExperimentalUnitApi::class)
@Composable
fun P1Page(modifier: Modifier = Modifier, onSnackClick: (id: Long) -> Unit = {}) {
    LaunchedEffect(Unit) {
        indexSnackMap // 这里加载一下
    }
    MainBoxSurface(modifier = modifier
        .fillMaxSize()
        .background(MainBackgroundColor)) {
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            item {
                Box(modifier = Modifier
                    .fillMaxWidth()
                    .height(130.dp)) {
                    Text(
                        text = "Types of\nSpiders", style = TextStyle.Default.copy(
                            color = MainTitleColor,
                            fontSize = 30.sp,
                            fontWeight = FontWeight.W900,
                            textAlign = TextAlign.Center,
                            fontFamily = FontFamily.Cursive,
                            letterSpacing = TextUnit(5f, TextUnitType.Sp)
                        ), modifier = Modifier.align(
                            Alignment.Center
                        )
                    )
                    SpiderWebImage(id = R.drawable.web_1, modifier = Modifier.size(140.dp))
                    SpiderWebImage(
                        id = R.drawable.ic_d_0,
                        modifier = Modifier
                            .padding(bottom = 10.dp)
                            .width(140.dp)
                            .fillMaxHeight()
                            .align(Alignment.TopEnd),
                        colorFilter = null,
                        contentScale = ContentScale.FillBounds
                    )
                }
            }
            item {
                Image(
                    painter = painterResource(id = R.drawable.web_2),
                    contentDescription = null,
                    modifier = Modifier
                        .fillMaxWidth()
                        .align(Alignment.BottomCenter)
                )
            }
            item {
                Row(modifier = Modifier.fillMaxWidth()) {
                    SpidersCell1(modifier = Modifier
                        .height(TOP_HEIGHT)
                        .weight(1f), onSnackClick = onSnackClick)
                    SpidersCell2(modifier = Modifier
                        .height(TOP_HEIGHT)
                        .weight(1f), onSnackClick = onSnackClick)
                }
            }
            item {
                Row(modifier = Modifier.fillMaxWidth()) {
                    SpidersCell3(modifier = Modifier
                        .height(TOP_HEIGHT)
                        .weight(1f), onSnackClick = onSnackClick)
                    SpidersCell4(modifier = Modifier
                        .height(TOP_HEIGHT)
                        .weight(1f), onSnackClick = onSnackClick)
                }
            }
            item {
                BottomTotal(onSnackClick = onSnackClick)
            }
            item {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(60.dp)
                        .background(color = Color(0xffbf7a60))
                ) {
                    Text("琼ICP备2022000272号-67A", modifier = Modifier.align(Alignment.Center))
                }
            }
        }
    }
}


@Composable
private fun BottomTotal(onSnackClick: (id: Long) -> Unit) {
    Box(modifier = Modifier.fillMaxWidth()) {
        SpiderWebImage(
            id = R.drawable.ic_d_8,
            modifier = Modifier
                .align(Alignment.TopEnd)
                .padding(top = 180.dp, end = 40.dp)
                .size(200.dp),
            colorFilter = ColorFilter.tint(MainTitleColor.copy(alpha = 0.3f))
        )
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier
                .weight(1f)
                .wrapContentHeight()) {
                SpidersCell5(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(CEN_HEIGHT),
                    onSnackClick = onSnackClick
                )
                ClassificationOfSpiders(modifier = Modifier
                    .fillMaxWidth()
                    .height(CEN_HEIGHT))
                LiveCycleOfSpiders(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(240.dp),
                    onSnackClick = onSnackClick
                )
            }
            Column(modifier = Modifier
                .weight(1f)
                .wrapContentHeight()) {
                NaturalPredators(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(280.dp),
                    onSnackClick = onSnackClick
                )

                Image(
                    painter = painterResource(id = R.drawable.ic_cookbook),
                    contentDescription = null,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(start = 20.dp),
                    contentScale = ContentScale.FillWidth
                )
            }
        }
    }
}

@Composable
private fun SpidersCell1(modifier: Modifier, onSnackClick: (id: Long) -> Unit) {
    SpidersCell(
        modifier = modifier,
        p = P4.p1,
        p1 = P4.p11,
        p2 = P4.p12,
        p3 = P4.p13,
        p4 = P4.p14,
        p5 = P4.p15,
        p6 = P4.p16,
        onSnackClick = onSnackClick
    )
}
@Composable
private fun SpidersCell2(modifier: Modifier, onSnackClick: (id: Long) -> Unit) {
    SpidersCell(
        modifier = modifier,
        p = P4.p2,
        p1 = P4.p21,
        p2 = P4.p22,
        p3 = P4.p23,
        p4 = P4.p24,
        p5 = P4.p25,
        p6 = P4.p26,
        onSnackClick = onSnackClick
    )
}
@Composable
private fun SpidersCell3(modifier: Modifier, onSnackClick: (id: Long) -> Unit) {
    SpidersCell(
        modifier = modifier,
        p = P4.p3,
        p1 = P4.p31,
        p2 = P4.p32,
        p3 = P4.p33,
        p4 = P4.p34,
        p5 = P4.p35,
        p6 = P4.p36,
        onSnackClick = onSnackClick
    )
}
@Composable
private fun SpidersCell4(modifier: Modifier, onSnackClick: (id: Long) -> Unit) {
    SpidersCell(
        modifier = modifier,
        p = P4.p4,
        p1 = P4.p41,
        p2 = P4.p42,
        p3 = P4.p43,
        p4 = P4.p44,
        p5 = P4.p45,
        p6 = P4.p46,
        onSnackClick = onSnackClick
    )
}
@Composable
private fun SpidersCell5(modifier: Modifier, onSnackClick: (id: Long) -> Unit) {
    SpidersCell(
        modifier = modifier,
        p = P4.p5,
        p1 = P4.p51,
        p2 = P4.p52,
        p3 = P4.p53,
        p4 = P4.p54,
        p5 = P4.p55,
        p6 = P4.p56,
        onSnackClick = onSnackClick
    )
}

@Composable
private fun SpidersCell(
    modifier: Modifier,
    p: Snack,
    p1: Snack,
    p2: Snack,
    p3: Snack,
    p4: Snack,
    p5: Snack,
    p6: Snack,
    onSnackClick: (id: Long) -> Unit
) {
    val columnHeight = 100.dp
    val cellHeight = 50.dp
    BorderLineBox(modifier = modifier, left = false, top = false, right = true, bottom = true) {
        TitleTips(p.name, modifier = Modifier
            .align(Alignment.TopCenter)
            .clickable { onSnackClick.invoke(p.id) })
        Column(modifier = Modifier
            .padding(top = TITLE_TOP_PADDING)
            .fillMaxWidth()
            .height(columnHeight)) {
            Row(modifier = Modifier.fillMaxWidth()) {
                SpiderWithTitle2(
                    snack = p1,
                    modifier = Modifier
                        .weight(1f)
                        .height(cellHeight),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p2,
                    modifier = Modifier
                        .weight(1f)
                        .height(cellHeight),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p3,
                    modifier = Modifier
                        .weight(1f)
                        .height(cellHeight),
                    onClick = onSnackClick
                )
            }
            Row(modifier = Modifier.fillMaxWidth()) {
                SpiderWithTitle2(
                    snack = p4,
                    modifier = Modifier
                        .weight(1f)
                        .height(cellHeight),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p5,
                    modifier = Modifier
                        .weight(1f)
                        .height(cellHeight),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p6,
                    modifier = Modifier
                        .weight(1f)
                        .height(cellHeight),
                    onClick = onSnackClick
                )
            }
        }
    }
}

@Composable
private fun SpiderWithTitle2(
    snack: Snack,
    modifier: Modifier = Modifier,
    onClick: (Long) -> Unit,
) {
    Column(
        modifier = modifier.clickable(onClick = { onClick(snack.id) }),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(modifier = Modifier
            .fillMaxWidth()
            .weight(1f)) {
            Image(
                painter = painterResource(id = snack.localImage),
                contentDescription = null,
                modifier = Modifier.fillMaxSize()
            )
            Image(
                painter = painterResource(id = R.drawable.ic_xiang),
                contentDescription = null,
                modifier = Modifier
                    .padding(top = 6.dp, end = 6.dp)
                    .size(10.dp)
                    .align(Alignment.TopEnd)
            )
        }
        Text(
            text = snack.name,
            style = TextStyle.Default.copy(
                color = MainTitleColor,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center,
                fontFamily = FontFamily.Cursive,
                fontSize = 8.sp
            ),
        )
    }
}

/**
 * 蜘蛛的天敌
 */
@Composable
private fun NaturalPredators(modifier: Modifier, onSnackClick: (id: Long) -> Unit) {
    val imgSize = 60.dp
    val p = P4.p7
    val p1 = P4.p71
    val p2 = P4.p72
    val p3 = P4.p73
    val p4 = P4.p74
    val p5 = P4.p75
    val p6 = P4.p76
    val p7 = P4.p77
    val p8 = P4.p78
    val p9 = P4.p79
    BorderLineBox(modifier = modifier, left = false, top = false, right = false, bottom = false) {
//        SpiderWebImage(id = R.drawable.ic_d_5, modifier = Modifier)
        TitleTips("康乃馨", modifier = Modifier
            .align(Alignment.TopCenter)
            .clickable { onSnackClick.invoke(p.id) })

        Column(modifier = Modifier
            .padding(top = TITLE_TOP_PADDING, bottom = 20.dp)
            .fillMaxSize(), verticalArrangement = Arrangement.SpaceEvenly) {
            Row (modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(), horizontalArrangement = Arrangement.SpaceEvenly){
                SpiderWithTitle2(
                    snack = p1,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p2,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p3,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
            }
            Row (modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(), horizontalArrangement = Arrangement.SpaceEvenly){
                SpiderWithTitle2(
                    snack = p4,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p5,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p6,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
            }
            Row (modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(), horizontalArrangement = Arrangement.Center){
                SpiderWithTitle2(
                    snack = p7,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p8,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
                SpiderWithTitle2(
                    snack = p9,
                    modifier = Modifier.size(imgSize),
                    onClick = onSnackClick
                )
            }
        }
    }
}


/**
 * 蜘蛛分类
 */
@Composable
private fun ClassificationOfSpiders(modifier: Modifier) {
    BorderLineBox(modifier = modifier, left = false, top = false) {
        TitleTips(P4.p8.name, modifier = Modifier.align(Alignment.TopCenter))
        Column(
            modifier = Modifier
                .padding(top = TITLE_TOP_PADDING, bottom = 4.dp)
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceEvenly
        ) {
            ClassifyRow(leftText = P4.p81.name, rightText = P4.p85.name)
            ClassifyRow(leftText = P4.p82.name, rightText = P4.p86.name)
            ClassifyRow(leftText = P4.p83.name, rightText = P4.p87.name)
            ClassifyRow(leftText = P4.p84.name, rightText = P4.p88.name)
        }
    }
}

@Composable
private fun ClassifyRow(leftText: String = "left", rightText: String = "right") {
    val textStyle = TextStyle.Default.copy(
        color = MainTitleColor,
        fontWeight = FontWeight.W900,
        textAlign = TextAlign.Center,
        fontSize = 11.sp,
    )
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = leftText,
            style = textStyle,
            modifier = Modifier
                .weight(1f)
                .padding(end = 5.dp),
            maxLines = 1,
            textAlign = TextAlign.End
        )
        Spacer(modifier = Modifier
            .size(5.dp)
            .clip(CircleShape)
            .background(color = MainTitleColor)
        )
        Image(
            painter = painterResource(id = R.drawable.ic_line_1),
            contentDescription = null,
            modifier = Modifier.width(50.dp)
        )
        Spacer(modifier = Modifier
            .size(5.dp)
            .clip(CircleShape)
            .background(color = MainTitleColor)
        )
        Text(
            text = rightText,
            style = textStyle,
            textAlign = TextAlign.Start,
            maxLines = 1,
            modifier = Modifier
                .weight(1f)
                .padding(start = 5.dp)
        )
    }
}

/**
 * 蜘蛛的生命周期
 */
@Composable
private fun LiveCycleOfSpiders(modifier: Modifier, onSnackClick: (id: Long) -> Unit) {
    val p = P4.p6
    val p1 = P4.p61
    val p2 = P4.p62
    val p3 = P4.p63
    val p4 = P4.p64
    BorderLineBox(modifier = modifier, left = false, top = false, right = false, bottom = false) {
        SpiderWebImage(
            id = R.drawable.ic_d_7,
            modifier = Modifier.padding(top = 20.dp),
            colorFilter = ColorFilter.tint(MainTitleColor.copy(alpha = 0.3f))
        )
        TitleTips(p.name, modifier = Modifier.align(Alignment.TopCenter))
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly, verticalAlignment = Alignment.CenterVertically) {
                LifeImage(resId = R.drawable.p61, modifier = Modifier.clickable { onSnackClick(p1.id) })
                Image(painter = painterResource(id = R.drawable.ic_line_1), contentDescription = null, modifier = Modifier.width(40.dp), contentScale = ContentScale.FillHeight)
                LifeImage(resId = R.drawable.p62, modifier = Modifier.clickable { onSnackClick(p2.id) })
            }
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly, verticalAlignment = Alignment.CenterVertically) {
                Image(painter = painterResource(id = R.drawable.ic_line_2), contentDescription = null, modifier = Modifier.height(40.dp), contentScale = ContentScale.FillWidth)
                Image(painter = painterResource(id = R.drawable.ic_line_1), contentDescription = null, modifier = Modifier.alpha(0f).width(40.dp), contentScale = ContentScale.FillHeight)
                Image(painter = painterResource(id = R.drawable.ic_line_2), contentDescription = null, modifier = Modifier.height(40.dp), contentScale = ContentScale.FillWidth)
            }
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly, verticalAlignment = Alignment.CenterVertically) {
                LifeImage(resId = R.drawable.p64, modifier = Modifier.clickable { onSnackClick(p3.id) })
                Image(painter = painterResource(id = R.drawable.ic_line_1), contentDescription = null, modifier = Modifier.width(40.dp), contentScale = ContentScale.FillHeight)
                LifeImage(resId = R.drawable.p63, modifier = Modifier.clickable { onSnackClick(p4.id) })
            }
        }
    }
}

@Composable
private fun LifeImage(modifier: Modifier, @DrawableRes resId: Int) {
    Box(modifier = modifier.size(60.dp)) {
        Image(painter = painterResource(id = resId), contentDescription = null, modifier = modifier.fillMaxSize())
        Image(
            painter = painterResource(id = R.drawable.ic_xiang),
            contentDescription = null,
            modifier = Modifier
                .padding(top = 4.dp, end = 4.dp)
                .size(15.dp)
                .align(Alignment.TopEnd),
            contentScale = ContentScale.FillBounds
        )
    }
}


@Composable
private fun TitleTips(text: String, modifier: Modifier) {
    Box(
        modifier = modifier
            .padding(top = 2.dp)
            .width(120.dp)
            .height(36.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_title_tips),
            contentDescription = null,
            modifier = Modifier.fillMaxSize()
        )
        Text(
            text = text, style = TextStyle.Default.copy(
                color = MainTitleColor,
                textAlign = TextAlign.Center,
                fontFamily = FontFamily.Monospace,
                fontWeight = FontWeight.Bold
            ), modifier = Modifier.align(alignment = Alignment.Center)
        )
    }
}

@Composable
private fun SpiderWebImage(
    @DrawableRes id: Int,
    modifier: Modifier = Modifier,
    contentScale: ContentScale = ContentScale.Fit,
    colorFilter: ColorFilter? = ColorFilter.tint(MainTitleColor),
) {
    Image(
        painter = painterResource(id = id),
        contentDescription = null,
        colorFilter = colorFilter,
        contentScale = contentScale,
        modifier = modifier
    )
}

//@Composable
//private fun SpiderWithTitle(
//    snack: Snack,
//    modifier: Modifier = Modifier,
//    @DrawableRes resId: Int = R.drawable.common_house_spider,
//    title: String = "Common house Spider",
//    onClick: (Long) -> Unit,
//) {
//    Column(
//        modifier = modifier.clickable(onClick = { onClick(snack.id) }),
//        horizontalAlignment = Alignment.CenterHorizontally
//    ) {
//        Box(modifier = Modifier
//            .fillMaxWidth()
//            .weight(1f)) {
//            Image(
//                painter = painterResource(id = resId),
//                contentDescription = null,
//                modifier = Modifier.fillMaxSize()
//            )
//            Image(
//                painter = painterResource(id = R.drawable.ic_xiang),
//                contentDescription = null,
//                modifier = Modifier
//                    .padding(top = 6.dp, end = 6.dp)
//                    .align(Alignment.TopEnd)
//            )
//        }
//        Text(
//            text = title,
//            style = TextStyle.Default.copy(
//                color = MainTitleColor,
//                fontWeight = FontWeight.Bold,
//                textAlign = TextAlign.Center,
//                fontFamily = FontFamily.Cursive,
//                fontSize = 8.sp
//            ),
//        )
//    }
//}

@Preview("default", heightDp = 1000)
@Composable
fun P1PagePreview() {
    MainTheme {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(1000.dp)
        ) {
            P1Page()
        }
    }
}
